/**
  * @description: 商品简介、兑换积分、兑换时间
*/
<template>
  <div class="pages">
    <div class="main-div">
      <div class="main-div-top">
        <div class="item-pic">
          <img :src="this.orderInfo.defaultImages" />
        </div>
        <div class="main-div-top-right-alignItem">
          <div>
            <div class="main-div-top-text">
              {{ orderInfo.goodsName }}
            </div>
            <div
              v-if="orderInfo.tradStatus == 0 || orderInfo.tradStatus == 1"
              class="main-div-bottom-text"
            >
              兑换数量：{{ orderInfo.goodsNum }}
            </div>
          </div>
        </div>
      </div>

      <van-cell-group
        v-if="orderInfo.tradStatus == 0 || orderInfo.tradStatus == 1"
      >
        <van-cell
          title="兑换积分"
          :value="this.orderInfo.orderPoints + '积分'"
          value-class="integral"
        />
        <van-cell
          title="兑换时间"
          :value="orderInfo.createTime"
          value-class="time"
        />
      </van-cell-group>

      <van-cell-group v-else>
        <van-cell
          title="兑换价格"
          :value="this.price || this.orderInfo.goodsPoints"
          value-class="integral"
        />
        <van-field name="stepper" label="兑换数量">
          <template #input>
            <van-stepper
              v-model="stepper"
              integer
              :max="numMax"
              async-change
              @change="onChange"
            />
          </template>
        </van-field>
        <div
          v-if="orderInfo.tradStatus == undefined && orderInfo.goodsType != 2"
          class="explain"
        >
          该权益兑换后不可退换
        </div>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import Bus from "@/utils/bus";
export default {
  name: "productIntroduction",
  props: { state: Number, orderInfo: Object },
  data() {
    return {
      stepper: 1,
      price: this.orderInfo.goodsPoints,
      numMax: this.$route.query.num,
    };
  },
  created() {
    if(this.$route.query.goodsNum){
      this.stepper = this.$route.query.goodsNum;
    }else{
      this.stepper = 1;
    }
    this.price = this.orderInfo.goodsPoints;
  },
  methods: {
    onChange(value) {
      if (value > this.numMax) {
        this.stepper = this.numMax;
        this.$toast("兑换数量超出最大库存数量,默认最大库存数");
      }
    },
  },
  watch: {
    stepper: {
      handler(value) {
        this.price = value * this.orderInfo.goodsPoints;
        Bus.$emit("stepperBybus", value);
      },
      immediate: true,
    },
  },
};
</script>
<style scoped lang="less">
.pages {
  margin-top: 12px;
  .van-cell__title {
    color: #999;
  }
  .integral {
    font-size: 14px;
    font-weight: 800;
    color: #51afb1;
  }
  .time {
    font-weight: 700;
    color: #000000;
  }
  .main-div {
    background: #fff;
    border-radius: 10px;
    padding: 16px 12px;
    .main-div-top {
      display: flex;
      .item-pic {
        img {
          width: 72px;
          height: 72px;
          border: 0.45px solid rgba(0, 0, 0, 0.2);
          border-radius: 4px;
        }
      }
      .main-div-top-right {
        margin-left: 8px;
        .main-div-top-text {
          font-weight: 700;
          color: #000000;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .main-div-bottom-text {
          font-size: 12px;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.6);
          line-height: 12px;
          margin-top: 4px;
        }
      }
      .main-div-top-right-alignItem {
        display: flex;
        align-items: center;
        margin-left: 8px;
        .main-div-top-text {
          font-weight: 700;
          color: #000000;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .main-div-bottom-text {
          font-size: 12px;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.6);
          line-height: 12px;
          margin-top: 4px;
        }
      }
    }
    .explain {
      background: rgba(81, 175, 177, 0.14);
      border-radius: 4px;
      padding: 3px 8px;
      font-size: 12px;
      font-weight: 700;
      color: #51afb1;
    }
    .van-cell::after {
      left: 0px;
      right: 0px;
    }
  }
  .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0;
  }
  .van-divider {
    margin: 0;
  }
  .van-cell {
    padding: 10px 0;
  }
  /deep/.van-field__label {
    flex: 2;
    color: #999;
  }
}
</style>
